<template>
	<view class="order-container">
		<v-tabs v-model="activeTab" fixed lineColor='#ADB838' activeColor='#ADB838' :scroll="false"
			:tabs="['全部', '进行中', '已完成']" @change="initRequest"></v-tabs>
		<OrdersList :orderList="initList" :ordersState="activeTab" />
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import OrdersList from './orders-list.vue'

	export default {
		components: {
			listCell,
			OrdersList
		},
		data() {
			return {
				activeTab: 0, // 0全部 1进行中 2已完成
				initList: [],
				page: 1,
				pageSize: 5,
				isOnPullDownRefresh: false 
			}
		},

		onLoad() {
			this.initRequest()
		},
		methods: {
			async getOrders() {
				uni.showLoading({
					title: '加载中'
				})
				let initList = await this.$api('orders')
				initList = initList.slice(this.pageSize * (this.page - 1), this.pageSize * this.page)
				if (initList.length) {
					this.initList = this.initList.concat(initList)
					this.page += 1
				}
				// 下拉刷新不回弹，需要主动停止刷新
				if (this.isOnPullDownRefresh) {
					uni.stopPullDownRefresh()
				}
				this.isOnPullDownRefresh = false

				uni.hideLoading()
			},
			// 初始化参数
			initRequest() {
				this.initList = []
				this.page = 1
				this.pageSize = 5
				this.getOrders()
			},
			// 触底懒加载
			onReachBottom() {
				this.getOrders()
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.isOnPullDownRefresh = true
				this.initRequest()
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>